import { useState, useRef } from "react";
import { QueryTable } from "@/components/QueryTable";
import BusinessActionDrawer from "../businessActionDrawer"
import useCancelCustomer from '@/components/_hooks/useCancelCustomer';

/**
 * 业务管理-上门
 */
export default function Visit() {
  const [actionDrawerStatus, setActionDrawer] = useState(false);
  const [editItem, setEditItem] = useState({})
  const onCustomerCancel = useCancelCustomer();
  const tableRef = useRef()

  const onFinish = () => {
    tableRef?.current?.refreshTable()
  };

  const columns = [
    {
      dataIndex: "customerCode",
      key: "customerCode",
      title: "客户编号",
      ellipsis: true,
      searchConfig: {
        type: 'input',
      },
    },
    {
      dataIndex: "customerName",
      key: "customerName",
      title: "客户姓名",
      ellipsis: true,
      searchConfig: {
        type: 'input',
      },
    },
    {
      dataIndex: "expectVisitTime",
      key: "expectVisitTime",
      title: "邀约上门时间",
      timeFormat: "YYYY-MM-DD",
    },
    {
      dataIndex: "actualVisitTime",
      key: "actualVisitTime",
      title: "实际上门时间",
      timeFormat: "YYYY-MM-DD",
    },
    {
      dataIndex: "remark",
      key: "remark",
      title: "备注",
      ellipsis: true,
    },
    {
      dataIndex: "action",
      key: "action",
      title: "操作",
      fixed: 'right',
      actionGroup: [
        {
          title: '签单',
          onClick: (_, record) => {
            setActionDrawer(true)
            setEditItem(record)
          }
        },
        {
          title: '作废',
          onClick: (_, record) => onCustomerCancel({ customerOrderId: record?.customerOrderId, callback: onFinish })
        }
      ],
    }
  ]
  return (
    <div className="feedback-container">
      <QueryTable
        rowkey={(record) => record?.customerOrderId}
        reqExtraParams={{
          orderStatus: 'visited'
        }}
        ref={tableRef}
        columns={columns}
        pagingInServer
        requestUrl="/crm/business/order/page"
      />
      <BusinessActionDrawer
        businessType="signed"
        setEditItem={setEditItem}
        editItem={editItem}
        isShow={actionDrawerStatus}
        onFinish={onFinish}
        onCancel={() => setActionDrawer(false)}
      />
    </div>
  );
}

Visit.route = {
  [MENU_PATH]: "/business/visit",
};
